<route lang="json">
{
  "meta": {
    "title": "t('zhiFuShouXuFei')"
  }
}
</route>
<script setup lang="ts" name="openMatrix-levelFee">
import { useRpopupPickerRef } from "@@/components/rework/RpopupPicker";
import useBalanceStore, { StoreCoinItem } from "@@/store/useBalanceStore";
import { fixedDecimals } from "@@/utils/tools/format";
import { addCache } from "@@/hooks/routeCache";
import { _require } from "@@/utils/tools";
import useTabPageStore from "@@/store/useTabPageStore";
import { apiOpenAmount, OpenAmount } from "@@/api/transaction/index";
import { apiFeeTxid } from "@@/api/transaction/submitTxid";
import { sdkTransfer, sdkSign } from "@@/sdk/web3Eth";
import { toast } from "@@/hooks/vantHooks";
import logs from "./components/logs.vue";
import { apiOpenMatrixLogs } from "@@/api/transaction/list";
import { dialogLevel } from "@@/enum/temp";

addCache("openMatrix-levelFee");

const balanceStore = useBalanceStore();
const tabPageStore = useTabPageStore();

const pickerData = computed<StoreCoinItem[]>(
  () =>
    Object.values(balanceStore.ethCoinEnum).filter((v) =>
      [BNB_ID].includes(v?.id!)
    ) as any
);

const RpopupPickerRef = useRpopupPickerRef<StoreCoinItem>();
const BNB_ID = -1;
onMounted(() => {
  watch(
    () => RpopupPickerRef.value?.elect,
    (newVal, oldVal) => {
      if (newVal?.id === oldVal?.id) return;
      if (newVal?.id === BNB_ID)
        form.amount = tabPageStore.homeData?.bnb_fee || "";
      balanceStore.findBalance(newVal);
    },
    {
      immediate: true,
      deep: true,
    }
  );
});

const electCoin = computed(
  () => balanceStore.ethCoinEnum[RpopupPickerRef.value?.elect?.id!]
);

const { t } = useI18n();
const form = reactive({
  amount: "",
});
const loading = reactive({
  onPayFee: false,
});
const openAmount = ref<OpenAmount.Res>();
async function getOpenAmount() {
  openAmount.value = await apiOpenAmount();
  form.amount ??= openAmount.value?.amount.toString() || "";
}
async function onPayFee() {
  if (!tabPageStore.homeData) return tabPageStore.getHomeData();
  const number = Number(tabPageStore.homeData.bnb_fee);
  const address = tabPageStore.homeData?.address.storage_address;
  // loading.onPayFee = true;
  // const sign = await sdkSign("pay fee");
  // loading.onPayFee = false;
  // if (!sign.status) return;
  loading.onPayFee = true;
  toast.loading(t("jiaoYiZhongQingBuYaoTuiChu"));
  const res = await sdkTransfer(number, 18, address);
  toast.close();
  loading.onPayFee = false;
  if (!res.status) return toast.error(res.message);
  const verify = await apiFeeTxid({ txid: res.data!, number });
  if (verify) {
    payFeeed.value = true;
    sessionStorage.removeItem(dialogLevel);
    tabPageStore.getHomeData();
  }
}

getOpenAmount();
tabPageStore.getHomeData();
const payFeeed = ref(false);
</script>

<template>
  <CpageView>
    <div class="auto-MT-md">
      <Ccard class="clip-path-1 flex-J-SB Pcol-sm" bg="var(--C-M1-O1)">
        <div>{{ $t("zhuWang") }}</div>
        <div>BNB SMart Chain (BEP20)</div>
      </Ccard>
      <Bcard1>
        <div class="flex-J-SB">
          <RpopupPicker
            class="flex-A-C"
            ref="RpopupPickerRef"
            :picker-data="pickerData"
          >
            <template #left-content>
              <Rimage size="42rem" :src="RpopupPickerRef?.elect?.logo" />
              <div class="ML-xs">{{ RpopupPickerRef?.elect?.code }}</div>
            </template>
            <template #option="{ code, logo }: StoreCoinItem">
              <div class="flex-A-C flex-J-SB" style="width: 5em">
                <Rimage size="42rem" :src="logo" />
                <div class="T-A-C" style="width: 3em">{{ code }}</div>
              </div>
            </template>
          </RpopupPicker>
          <div>{{ $t("yue") }}{{ fixedDecimals(electCoin?.balance, 4) }}</div>
        </div>
        <Ccard bg="var(--C-M1-O1)" class="clip-path-1 MT-md PD-sm auto-MT-sm">
          <Rinput readonly :model-value="form.amount" type="number" />
          <VanDivider />
        </Ccard>
        <div class="C-fail T-S-sm MT-sm">
          <span>
            {{
              $t(
                "chongYiDianShuLiangDeBnbZuoWeiGassFeiZhuYaoYongYuKaiQiHeShengJiShiShiYong"
              )
            }}
          </span>
        </div>
      </Bcard1>
      <Rbutton
        :disabled="payFeeed || tabPageStore.homeData?.is_fee != 1"
        @click="onPayFee"
        :loading="loading.onPayFee"
        class="MT-md clip-path-1"
        style="color: #ff0"
        :size="'large'"
        bg="var(--C-M1)"
      >
        {{ $t("zhiFuShouXuFei") }}
      </Rbutton>

      <VanDivider class="C-M1">{{ $t("chongZhiJiLu") }}</VanDivider>
      <logs :unincludes="[apiOpenMatrixLogs]" />
    </div>
  </CpageView>
</template>

<style lang="scss" scoped>
.cls1 {
  padding: var(--gap-xs);
  background-color: var(--C-B2);
  flex: 1;
  text-align: center;
  font-size: var(--T-S-sm);
}
</style>
